<template>
  <div ref="qcode" v-if="code!==''" @click="over" :class="['bar-code', size===120?'bgc': '']" :style="{padding: (size === 30 ? 0 : 10)+'px'}">
    <div style="text-align: right;" v-show="show">
<!--      <SvgIcon  name="ele-Close" :size="22" @click.stop.prevent="close" />-->
    </div>
    <qrcode-vue :value="code" :size="size" />
  </div>
</template>
<script>
// 二维码
import QrcodeVue from "qrcode.vue";
export default {
  components: {QrcodeVue},
  props: {
    modelValue: {type: [String, Number]},
    transType: {type: [String, Number]},
  },
  data () {
    return {
      size: 30,
      show: false
    }
  },
  computed: {
    code () {
      if(this.transType && this.modelValue) {
        return this.transType + '-' + this.modelValue
      }
      return ''
    }
  },
  methods: {
    over () {
      this.size = 120
      this.show = true
    },
    close () {
      if(this.size === 30) return
      this.$nextTick(() => {
        this.size = 30
        this.show = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.bgc {
  background-color: #dedede;
  border-radius: 6px;
}
.bar-code {
  &:hover {
    cursor: pointer;
  }

}
</style>